<template>
    <el-button type="primary" @click="add_dialog_visible = true" size="small">添加用户</el-button>
    <el-table border stripe :data="users">
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="user_name" label="user_name"/>
        <el-table-column prop="user_password" label="user_password"/>
        <el-table-column prop="role_id" label="role_id"/>
        <el-table-column align="right" label="操作" width="200px">
            <template #default="scope">
            <el-button 
                size="small" 
                @click="handleEdit(scope.$index, scope.row)"
            >
                编辑
            </el-button>
            <el-button 
                size="small" 
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >
                删除
            </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
        title="添加用户"
        v-model="add_dialog_visible"
        width="30%"
    >
        <el-form
            ref="ruleFormRef"
            :model="user_form"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="user_name" prop="user_name">
                <el-input v-model="user_form.user_name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="user_password" prop="user_password">
                <el-input v-model="user_form.user_password" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="role_id" prop="role_id">
                <el-input v-model="user_form.role_id" autocomplete="off"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



    
    <!-- 编辑任务页面 -->
    <el-dialog
        title="编辑用户信息"
        v-model="edit_dialog_visible"
        width="30%"
    >
        <el-form
            ref="editFormRef"
            :model="user_form"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="user_name" prop="user_name">
                <el-input v-model="user_form.user_name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="user_password" prop="user_password">
                <el-input v-model="user_form.user_password" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="role_id" prop="role_id">
                <el-input v-model="user_form.role_id" autocomplete="off"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
                <el-button @click="resetForm(editFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
 
<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

const ruleFormRef = ref()
const editFormRef = ref()
const add_dialog_visible = ref(false)
const edit_dialog_visible = ref(false)

const user_form = reactive({
    id:'',
    user_name: '',
    user_password: '',
    role_id: ''
})


const users = ref([])
const getUsers = () => {
    const token = sessionStorage.getItem('token')
    axios.get("http://localhost:5000/users", {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then((res) => {
        users.value = res.data;
        console.log(users.value);
    })
}

const handleEdit = (index, row) => {
    for(let key in row) {
        user_form[key] = row[key]
    }
    console.log(row);
    
    edit_dialog_visible.value = true
}

const handleDelete = (index, row) => {
    console.log(row.id);
    const token = sessionStorage.getItem('token')
    axios.delete(`http://localhost:5000/users/${row.id}`, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then(() => {
        getUsers()
    })
}

const submitEditForm = (formEl) => {
    const token = sessionStorage.getItem('token')
    axios.put(`http://localhost:5000/users/${user_form.id}`, user_form, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then((res) => {
        formEl.resetFields()
        edit_dialog_visible.value = false
        getUsers()
    })
}

const submitForm = (formEl) => {
    const token = sessionStorage.getItem('token')
    axios.post('http://localhost:5000/users', user_form, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then(() => {
        add_dialog_visible.value = false
        formEl.resetFields()
        getUsers()
    })
}
// 重置表单
const resetForm = (formEl) => {
    formEl.resetFields()
}

onMounted(() => {
    getUsers()
})
</script>
 
<style lang="scss" scoped>

</style>